<template>
    <div class="myorder">
        <!-- -------------------------------我的订单 -->
        <div class="back-nav-box">
            <back-nav title="我的订单" left-text="返回" left-arrow @navback='navback'></back-nav>
        </div>
        <!-- 蓝色底 -->
        <div class="blue-box"></div>

        <!-- 二级导航 -->
        <div class="child-nav">
            <div :class="{'active':Active===0}" @click="navAll">全部</div>
            <div :class="{'active':Active===1}" @click="navIng">进行中</div>
            <div :class="Active==2?'active':''" @click="navEd">已结束</div>
        </div>

        <div>
            <router-view></router-view>
        </div>
         
    </div>
</template>

<script>
import BackNav from '../components/BackNav.vue'
    export default {
        data() {
            return {
                Active:0,
                allAccount:'',
            }
        },
        components:{BackNav},
        created() {
                this.FindOrder();
        },
        methods: {
            // 查询订单 接口
            FindOrder(){
                this.axios({
                    method:'get',
                    url:'/findOrder',
                    params:{
                        status:0
                    }
                }).then(res=>{
                    console.log('res==>',res);
                    
                    this.axios({
                        method:'post',
                    url:'/removeOrder',
                    data:{
                        oid:"NO1625142082223"
                    }
                }).then(res=>{
                    console.log('删除订单res==>',res);
                })
                

                }).catch(err=>{
                    console.log('err==>',err);
                })
            },
            navback(){
                this.$router.push({name:'My'})
            },
            // 全部
            navAll(){
                this.Active=0
                this.$router.push({name:'Navall'})
            },
            // 进行中
             navIng(){
                this.Active=1
                this.$router.push({name:'Naving'})
            },
            // 已完成
             navEd(){
                this.Active=2
                this.$router.push({name:'Naved'})
            }
        },
    }
</script>

<style lang="less" scoped>

// ----------------
.active{
    color: #0c34ba !important;
    border-bottom: 2px solid #0c34ba;
}
.myorder{
    min-height: 100vh;
    background-color: #f7f7f7;
}
// 二级导航
.child-nav{
    width: 355px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    top: 180px;
    left: 10px;
    background-color: #fff;
    display: flex;
    border-radius: 10px;
    justify-content: space-around;
    div{
        width: 60px;
        // flex: 1;
        font-size: 16px;
        color: #666;
        text-align: center;
    }
}

.back-nav-box{
        z-index: 9;
        position: sticky;
        top: 0;
    }
    // 蓝色底
    .blue-box{
        width: 100%;
        height: 150px;
        background-color: #0c34ba;
    }
</style>